/**
 * Created by MinTher on 2017/7/2.
 * @author:bjzhang
 */
'use strict';
import React,{ Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    Alert
} from 'react-native';
import { common } from '../module/common';
import Toast from 'react-native-root-toast';
export default class FindChest extends Component{
    constructor(props){
        super(props);
        // alert(JSON.stringify(this.bagInfo));
        this.args = [{title : '留下了一张照片',thumbnail: {uri:this.props.BagInfo.thumbnail,method:'GET',header:{ Pragma:'no-cache'},body:'暂无'},route:'ImageDetail'},
                     {title : '留下了一段视频',thumbnail: {uri:this.props.BagInfo.thumbnail,method:'GET',header:{ Pragma:'no-cache'},body:'暂无'},route:'VideoDetail'},
                     {title : '留下了一个大红包！',thumbnail: require('../../icon/btn/btn_money_big.png'),route:'RedPacketDetail'},
                     {title : '留下了一个特别的礼物！',thumbnail: require('../../icon/btn/btn_shopping_big.png'),route:'EventDetail'}]
    }
    componentDidMount(){
    }
    closeFind(){
        typeof this.props.onClosed == 'function' && this.props.onClosed();
    }
    detailClick(){
        let that = this;
        let bagInfo = that.props.BagInfo;
        let route = this.args[bagInfo.type - 1].route;
        if(bagInfo.locked > 0){
            alert('确定要花费1个钥匙打开该箱子吗？');
            return;
        }
        common.get(common.api.bag.detail,{id:bagInfo.id,type:bagInfo.type}).then(res => {
            that.props.onNavigation.navigate(route,{ bag: res, refresh:that.props.onClosed });
        }).catch(err => {
            var statusCode = err['statusCode'];
            if(statusCode == 1005){
                that.props.onNavigation.navigate('Login');
                return;
            }else if(statusCode == 1006){
                Alert.alert('账号在其他设备登陆',[{text:'确定',onPress:() => {
                    that.props.onNavigation.navigate('Login');
                }}]);
                return;
            }
            Toast.show("少侠手速慢了哦，已被同僚打开。",{
                duration: Toast.durations.LONG,
                position: Toast.positions.BOTTOM
            });
        });
    }
    render(){
        let bagInfo = this.props.BagInfo;
        var param = { title : '您需要一把宝箱钥匙才可打开！', thumbnail : require('../../icon/btn/btn_wenhao.png') };
        if(bagInfo.locked <= 0){
            param = this.args[bagInfo.type - 1];
        }
        return (
            <View style={[styles.container,{backgroundColor:'rgba(0,0,0,.85)',alignItems:'center'}]}>
                <View style={styles.popupLayer}>
                    <View>
                        <Text style={styles.fontNickName}>{bagInfo.nickName}</Text>
                        <View style={styles.addressWrap}>
                            <Image source={require('../../icon/common/icon_map.png')}/>
                            <Text style={styles.addressTx}>{bagInfo.location}</Text>
                        </View>
                    </View>
                    <View style={styles.mediaWrap}>
                        <Image style={styles.mediaBackgroundImage} resizeMode="contain" source={param.thumbnail}/>
                        <Text style={styles.mediaTypeTx}>{param.title}</Text>
                    </View>
                    <View style={styles.openButtonWrap}>
                        <TouchableOpacity activeOpacity={.7} onPress={this.detailClick.bind(this)} style={styles.openButton}>
                            <Text style={styles.openButtonTx}>打开</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.closeWrap}>
                    <TouchableOpacity activeOpacity={.7} onPress={this.closeFind.bind(this)}>
                        <Image source={require('../../icon/menu/menu_icon_off.png')}/>
                    </TouchableOpacity>
                </View>
                <View style={styles.headerBox}>
                    <Image style={styles.headerImg} source={{uri:bagInfo.avatar,method:'GET',header:{Pragma:'no-cache'},body:'暂无'}}/>
                    <Image style={styles.userSexIco} source={bagInfo.sex == 2 ? require('../../icon/common/icon_women.png') : require('../../icon/common/icon_man.png')}/>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection:'column',
        justifyContent:'space-between',
    },
    popupLayer:{
        width:320,
        height:356,
        backgroundColor:'#fff',
        borderRadius:15,
        top:142,
        alignItems:'center',
    },
    headerImg:{
        width:54,
        height:54,
        borderRadius:54,
        overlayColor:'transparent',
    },
    headerBox:{
        top:115,
        left:160,
        position:'absolute',
    },
    userSexIco:{
        right:0,
        top:0,
        position:'absolute',
    },
    fontNickName:{
        fontSize:21,
        color:'#5F6484',
        marginTop:47,
        textAlign:'center',
    },
    addressWrap:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
    },
    mediaBackgroundImage:{
        width:100,
        height:80,
    },
    mediaTypeTx:{
        marginTop:10,
        fontSize:12,
        color:'#5F6484',
        textAlign:'center'
    },
    mediaWrap:{
        alignItems:'center',
        marginTop:45,
    },
    openButton:{
        width:300,
        height:50,
        backgroundColor:'#43CBFE',
        justifyContent:'center',
        alignItems:'center',
        borderRadius:4,
    },
    openButtonWrap:{
        paddingLeft:10,
        paddingRight:10,
        marginTop:47,
    },
    openButtonTx:{
        color:'#fff',
        fontSize:17,
    },
    closeWrap:{
        alignItems:'center',
        marginTop:30,
        marginBottom:30,
    },
    addressTx:{
        marginLeft:10
    }
});